<template>
  <div>
    <!-- 遍历数据 -->
    <van-cell icon="search" v-for="(item, index) in list"
     :key="index" @click="$emit('search',item)">
     <!-- 子组件传值 -->
      <div slot="title" v-html="highlight(item)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestion } from '@/api/search.js'
// import { debounce } from 'lodash'
// 方式3-手写防抖(及格版)
// function debounce (fn, num) {
//   let timer = null
//   // 高阶函数(接受函数作为参数/返回函数)
//   return function (val) {
//     // console.log(this)//this执行组件
//     // 闭包,延长变量的使用范围
//     if (timer) clearTimeout(timer)
//     timer = setTimeout(() => {
//       // 改变this执行,用call/apply/bind
//       // 箭头函数里面this是上一级的的this
//       fn.call(this, val)
//     }, num)
//   }
// }
function debounce (fn, num) {
  let timer = null
  return function (val) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.call(this, val)
    }, num)
  }
}
export default {
  name: 'SearchSuggest',
  components: {

  },
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  watch: {
    searchText: {
      // 方式二： 使用lodash防抖
      handler: debounce(async function (val) {
        console.log(val)
        // 获取数据
        // 调用接口
        const res = await getSearchSuggestion(val)
        // console.log(res)
        // 定义一个变量来存储
        const list = res.data.data.options
        // 对数据做空值判断
        if (list.length === 0 || list[0] === null) {
          this.list = []
        } else {
          this.list = list
        }
        // this.list = res.data.data.options
      }, 500),
      immediate: true // 立即执行，当组件生成的时候执行handler
    }
  },
  data () {
    return {
      // 保存数据
      list: []
      // timer: null
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  methods: {
    highlight (item) {
      // 高亮搜索内容
      // return item + '<span style="color:red">123</span>'
      return item.replace(
        new RegExp(this.searchText, 'gi'),
        `<span style="color:#3296fa">${this.searchText}</span>`
      )
    }
  }
}
</script>

<style>
</style>